<!-- Author:Rain -->
<template>
  <div id="wrap" class="page-job-recommend has-header">
    <div class="job-recommend-main">
      <div class="job-recommend-search" :class="{ 'is-expand': topSelected }">
        <div class="recommend-search-inner">
          <div class="recommend-search-expect clearfix">
            <a
              href="javascript:;"
              ka="recommend_search_expand_click"
              class="search-expand-btn"
              :class="{ active: topSelected }"
              @click="changeTopStatus"
              >筛选</a
            ><a href="javascript:;" class="recommend-job-btn active">推荐职位</a
            ><!----><a
              href="javascript:;"
              class="recommend-job-btn has-tooltip"
              data-original-title="null"
              ><span class="text-content">前端/移动开发（深圳）</span></a
            ><a href="javascript:;" class="recommend-job-btn has-tooltip" data-original-title="null"
              ><span class="text-content">Java（深圳）</span></a
            ><a href="javascript:;" class="recommend-job-btn has-tooltip" data-original-title="null"
              ><span class="text-content">后端开发（深圳）</span></a
            ><a ka="add-expect" href="javascript:;" class="add-expect-btn">添加求职期望</a>
          </div>
          <div
            class="recommend-search-more clearfix"
            :style="{
              height: topSelected ? '32px' : '0px',
              padding: topSelected ? '12px 0px' : '0px',
              overflow: displayItem ? '' : 'hidden'
            }"
          >
            <span ka="switch_city_dialog_open" class="city-label"
              ><i class="ui-icon-location"></i>深圳</span
            >
            <div
              v-for="(option, index1) in options"
              :key="index1"
              :class="{
                open: option.selectDropdown,
                'condition-industry-select': option.industrySelect,
                'condition-filter-select': !option.industrySelect,
                'is-select': option.selectNum !== 0
              }"
              v-show="option.show"
              @mouseenter.stop="showDropdown(option)"
              @mouseleave.stop="hideDropdown(option)"
            >
              <div class="current-select">
                <span class="placeholder-text">{{ option.optionText }}</span
                ><!---->
                <em class="select-num" v-show="option.selectNum !== 0">({{ option.selectNum }})</em>
              </div>
              <div
                class="filter-select-dropdown"
                :style="{ display: option.selectDropdown ? 'block' : 'none' }"
                v-show="!option.industrySelect"
              >
                <ul>
                  <li
                    ka="sel-job-rec-jobType-0"
                    v-for="(text, index2) in option.dropdown"
                    :key="index2"
                    @click="changeActive(option, text, option.optionText)"
                    :class="{ active: text.active }"
                  >
                    {{ text.text }}<i class="ui-icon-check"></i>
                  </li>
                </ul>
              </div>
              <div
                class="filter-select-dropdown"
                v-show="option.industrySelect"
                :style="{ display: option.selectDropdown ? 'block' : 'none' }"
              >
                <ul>
                  <li class="clearfix" v-for="(item, index2) in option.dropdown" :key="index2">
                    <span class="label">{{ item.industry }}</span>
                    <div class="select-list">
                      <a
                        href="javascript:;"
                        ka="sel-industry-0"
                        v-for="(text, index3) in item.industryOptions"
                        :key="index3"
                        :class="{ active: text.active }"
                        @click="changeActive(option, text, option.optionText, $event)"
                        >{{ text.text }}<i class="ui-icon-check"></i
                      ></a>
                    </div>
                  </li>
                </ul>
              </div>
            </div>

            <a
              href="javascript:;"
              ka="empty-filter"
              class="clear-search-btn"
              @click="clearCondition"
              >清空筛选条件</a
            >
          </div>
        </div>
        <!---->
      </div>
      <!-- result -->
      <div class="job-recommend-result">
        <div class="recommend-result-inner">
          <div class="recommend-result-job clearfix">
            <div class="job-list-container">
              <!---->
              <ul class="rec-job-list">
                <li
                  v-for="(job, index) in jobs"
                  :key="index"
                  class="job-item "
                  :class="{'active':index === selectItem}"
                  @click="changeInfoShow(job.jobInfo.id,job.bossInfo.id,index)"
                >
                  <listItem :job="job"></listItem>
                </li>
                <!-- <li v-for="(job,index) in jobs" :key="job.id">
                  <listItem :job="job"></listItem>
                </li> -->
              </ul>
              <div class="loading-wait">
                <div class="rect1"></div>
                <div class="rect2"></div>
                <div class="rect3"></div>
                <div class="rect4"></div>
              </div>
              <!---->
            </div>
            <div class="job-detail-container">
              <!---->
              <infoShow></infoShow>
            </div>
          </div>
        </div>
      </div>
      <!---->
    </div>
  </div>
</template>

<script setup lang="ts">
import listItem from './jobShowView/listItem.vue'
import infoShow from './jobShowView/infoShow.vue'
import { getJobInfo } from '@/api/mock'
import { useUserStore } from '@/store/modules/user'
import {getRecommodJob} from "@/api/user/index"
 
const jobs = reactive([])
const userStore = useUserStore();
const updateJobData =  userStore.updateJobData;
// 职位选中判断参数
const selectItem = ref(0);
// 添加display
const displayItem = ref(false)
// 筛选切换参数
const topSelected = ref(false)
// 显示兼职选项
const partTime = ref(false)
// 根据兼职选项切换薪资待遇选项
const salaryShow = computed(() => !partTime.value)
// 列表数据
const optionArray = [
  {
    optionText: '求职类型',
    dropdown: [
      { text: '不限', active: false },
      { text: '全职', active: false },
      { text: '兼职', active: false },
      { text: '实习', active: false }
    ],
    industrySelect: false,
    show: true,
    selectDropdown: false,
    selectNum: 0
  },
  {
    optionText: '结算方式',
    dropdown: [
      { text: '不限', active: false },
      { text: '日结', active: false },
      { text: '周结', active: false },
      { text: '月结', active: false },
      { text: '完工结', active: false }
    ],
    industrySelect: false,
    show: partTime,
    selectDropdown: false,
    selectNum: 0
  },
  {
    optionText: '兼职时间',
    dropdown: [
      { text: '不限', active: false },
      { text: '周末/节假日', active: false },
      { text: '寒暑假', active: false },
      { text: '短期兼职', active: false },
      { text: '长期兼职', active: false },
      { text: '工作日', active: false },
      { text: '夜班', active: false }
    ],
    industrySelect: false,
    show: partTime,
    selectDropdown: false,
    selectNum: 0
  },
  {
    optionText: '薪资待遇',
    dropdown: [
      { text: '不限', active: false },
      { text: '3K以下 ', active: false },
      { text: '3-5K', active: false },
      { text: '5-10K', active: false },
      { text: '10-20K', active: false },
      { text: '20-50K', active: false },
      { text: '50K以上', active: false }
    ],
    industrySelect: false,
    show: salaryShow,
    selectDropdown: false,
    selectNum: 0
  },
  {
    optionText: '工作经验',
    dropdown: [
      { text: '不限', active: false },
      { text: '在校生', active: false },
      { text: '应届生', active: false },
      { text: '经验不限', active: false },
      { text: '一年以内', active: false },
      { text: '1-3年', active: false },
      { text: '3-5年', active: false },
      { text: '5-10年', active: false },
      { text: '10年以上', active: false }
    ],
    industrySelect: false,
    show: true,
    selectDropdown: false,
    selectNum: 0
  },
  {
    optionText: '学历要求',
    dropdown: [
      { text: '不限', active: false },
      { text: '初中及以下', active: false },
      { text: '中专/中技', active: false },
      { text: '高中', active: false },
      { text: '大专', active: false },
      { text: '本科', active: false },
      { text: '硕士', active: false },
      { text: '博士', active: false }
    ],
    industrySelect: false,
    show: true,
    selectDropdown: false,
    selectNum: 0
  },
  {
    optionText: '公司行业',
    dropdown: [
      {
        industry: '互联网/AI',
        industryOptions: [
          { text: '电子商务', active: false },
          { text: '游戏', active: false },
          { text: '社交网络与媒体', active: false },
          { text: '广告营销', active: false },
          { text: '大数据', active: false },
          { text: '医疗健康', active: false },
          { text: '生活服务(020)', active: false },
          { text: '分类信息', active: false },
          { text: '音乐/视频/阅读', active: false },
          { text: '在线教育', active: false },
          { text: '社交网络', active: false },
          { text: '人力资源服务', active: false },
          { text: '企业服务', active: false },
          { text: '信息安全', active: false },
          { text: '新零售', active: false },
          { text: '移动互联网', active: false },
          { text: '互联网', active: false },
          { text: '计算机软件', active: false },
          { text: '计算机硬件', active: false },
          { text: '计算机服务', active: false },
          { text: '通信/网络设备', active: false },
          { text: '运营商/增值服务', active: false },
          { text: '电子/半导体/集成电路', active: false },
          { text: '人工智能', active: false },
          { text: '云计算', active: false },
          { text: '物联网', active: false }
        ]
      },
      {
        industry: '广告/传媒/文化/体育',
        industryOptions: [
          { text: '广告/公关/会展', active: false },
          { text: '新闻/出版', active: false },
          { text: '广播/影视', active: false },
          { text: '文化艺术/娱乐', active: false },
          { text: '体育', active: false }
        ]
      },
      {
        industry: '金融',
        industryOptions: [
          { text: '银行', active: false },
          { text: '保险', active: false },
          { text: '证券/期货', active: false },
          { text: '基金', active: false },
          { text: '信托', active: false },
          { text: '互联网金融', active: false },
          { text: '投资/融资', active: false },
          { text: '租赁/拍卖/典当/担保', active: false },
          { text: '财富管理', active: false },
          { text: '其他金融业', active: false }
        ]
      },
      {
        industry: '教育培训',
        industryOptions: [
          { text: '当前教育', active: false },
          { text: '学校/学历教育', active: false },
          { text: '培训/辅导机构', active: false },
          { text: '学术/科研', active: false },
          { text: '职业培训', active: false }
        ]
      },
      {
        industry: '制药/医疗',
        industryOptions: [
          { text: '生物制药', active: false },
          { text: '医疗服务', active: false },
          { text: '医疗器械', active: false },
          { text: '医美服务', active: false },
          { text: '医药批发零售', active: false },
          { text: '医疗研发外包', active: false }
        ]
      },
      {
        industry: '交通运输/物流',
        industryOptions: [
          { text: '交通/运输', active: false },
          { text: '物流/仓储', active: false },
          { text: '批发/零售', active: false },
          { text: '进出口贸易', active: false },
          { text: '即时配送', active: false },
          { text: '快递', active: false },
          { text: '公路物流', active: false },
          { text: '同城货运', active: false },
          { text: '跨境物流', active: false },
          { text: '装卸搬运和仓储业', active: false },
          { text: '客运服务', active: false },
          { text: '港口/铁路/公路/机场', active: false }
        ]
      },
      {
        industry: '专业服务',
        industryOptions: [
          { text: '咨询', active: false },
          { text: '法律', active: false },
          { text: '翻译', active: false },
          { text: '人力资源服务', active: false },
          { text: '财务/审计/税务', active: false },
          { text: '检测/认证', active: false },
          { text: '专利/商标/知识产权', active: false },
          { text: '其他专业服务', active: false },
          { text: '检测/认证/知识产权', active: false }
        ]
      },
      {
        industry: '房地产/建筑',
        industryOptions: [
          { text: '房地产开发经营', active: false },
          { text: '工程施工', active: false },
          { text: '建筑设计', active: false },
          { text: '装修装饰', active: false },
          { text: '建筑材料', active: false },
          { text: '房地产中介/租赁', active: false },
          { text: '物业管理', active: false },
          { text: '房屋建筑工程', active: false },
          { text: '土木工程', active: false },
          { text: '机电工程', active: false },
          { text: '建筑工程咨询服务', active: false },
          { text: '土地与公共设施管理', active: false }
        ]
      },
      {
        industry: '汽车',
        industryOptions: [
          { text: '汽车研发/制造', active: false },
          { text: '汽车零部件', active: false },
          { text: '4S店/后市场', active: false },
          { text: '新能源汽车', active: false },
          { text: '汽车智能网联', active: false },
          { text: '汽车经销商', active: false },
          { text: '汽车后市场', active: false },
          { text: '摩托车/自行车制造', active: false }
        ]
      },
      {
        industry: '制造业',
        industryOptions: [
          { text: '机械设备/机电/重工', active: false },
          { text: '仪器仪表/工业自动化', active: false },
          { text: '原材料及加工/模具', active: false },
          { text: '印刷/包装/造纸', active: false },
          { text: '铁路/船舶/航空/航天制造', active: false },
          { text: '通用设备', active: false },
          { text: '专用设备', active: false },
          { text: '电气机械/器材', active: false },
          { text: '金属制品', active: false },
          { text: '非金属矿物制品', active: false },
          { text: '橡胶/塑料制品', active: false },
          { text: '化学原料/化学制品', active: false },
          { text: '仪器仪表', active: false },
          { text: '自动化设备', active: false },
          { text: '计算机/通信/其他电子设备', active: false },
          { text: '新材料', active: false },
          { text: '其他制造业', active: false }
        ]
      },
      {
        industry: '消费品/批发/零售',
        industryOptions: [
          { text: '食品/饮料/烟酒', active: false },
          { text: '日化', active: false },
          { text: '服装/纺织', active: false },
          { text: '家具/家电/家居', active: false },
          { text: '玩具/礼品', active: false },
          { text: '珠宝/首饰', active: false },
          { text: '工艺品/收藏品', active: false },
          { text: '办公用品及设备', active: false },
          { text: '家具/家居', active: false },
          { text: '家用电器', active: false },
          { text: '批发/零售', active: false },
          { text: '进出口贸易', active: false },
          { text: '其他消费品', active: false }
        ]
      },
      {
        industry: '服务业',
        industryOptions: [
          { text: '餐饮', active: false },
          { text: '酒店/民宿', active: false },
          { text: '旅游/景区', active: false },
          { text: '美容/美发', active: false },
          { text: '婚庆/摄影', active: false },
          { text: '其他生活服务', active: false },
          { text: '休闲/娱乐', active: false },
          { text: '回收/维修', active: false },
          { text: '家政服务', active: false },
          { text: '宠物服务', active: false },
          { text: '美容', active: false },
          { text: '美发', active: false },
          { text: '运动/健身', active: false },
          { text: '保健/养生', active: false }
        ]
      },
      {
        industry: '能源/化工/环保',
        industryOptions: [
          { text: '石油/石化', active: false },
          { text: '化工', active: false },
          { text: '矿产/地质', active: false },
          { text: '采掘/冶炼', active: false },
          { text: '电力/热力/燃气/水利', active: false },
          { text: '新能源', active: false },
          { text: '环保', active: false },
          { text: '光伏', active: false },
          { text: '储能', active: false },
          { text: '动力电池', active: false },
          { text: '风电', active: false },
          { text: '其他新能源', active: false }
        ]
      },
      {
        industry: '政府/非盈利机构/其他',
        industryOptions: [
          { text: '政府/公共事业', active: false },
          { text: '非盈利机构', active: false },
          { text: '农/林/牧/渔', active: false },
          { text: '其他行业', active: false }
        ]
      },
      {
        industry: '电子/通信/半导体',
        industryOptions: [
          { text: '智能硬件/消费电子', active: false },
          { text: '通信/网络设备', active: false },
          { text: '运营商/增值服务', active: false },
          { text: '计算机硬件', active: false }
        ]
      }
    ],
    industrySelect: true,
    show: true,
    selectDropdown: false,
    selectNum: 0
  },
  {
    optionText: '公司规模',
    dropdown: [
      { text: '不限', active: false },
      { text: '0-20人', active: false },
      { text: '20-99人', active: false },
      { text: '100-499人', active: false },
      { text: '500-999人', active: false },
      { text: '1000-9999人', active: false },
      { text: '10000人以上', active: false }
    ],
    industrySelect: false,
    show: true,
    selectDropdown: false,
    selectNum: 0
  }
]

const options = reactive(optionArray)

getJobInfo().then((val) => {
  const arr: Array<any> = val
  Object.assign(jobs, arr.slice(0, 40))
})
//获取推荐列表工作岗位
getRecommodJob().then(val=>{
  console.log(val);
  const arr: Array<any> = val.data
    console.log(arr);
    
    //黄文杰你来改！！！！QAQ，你改的应该快一点！
    // Object.assign(jobs, arr.slice(0, 40))

}).catch(err=>{

})

updateJobData({jobId:1,bossId:1});
function showDropdown(option) {
  option.selectDropdown = true
}

function hideDropdown(option) {
  option.selectDropdown = false
}

function changeActive(option, text, itemTitle) {
  if (text.text !== '不限') {
    if (text.active) {
      text.active = false
      option.selectNum -= 1
    } else {
      if (itemTitle === '公司行业' && option.selectNum === 3) {
        alert('最多只能选三个哦!')
      } else {
        option.selectNum += 1
        if (['求职类型', '薪资待遇'].includes(itemTitle)) {
          option.dropdown.forEach((item) => (item.active = false))
          option.selectNum = option.selectNum > 1 ? 1 : option.selectNum
        }
        text.active = true
      }
    }

    // 兼职切换
    if (text.text === '兼职' || (partTime.value && !['结算方式', '兼职时间'].includes(itemTitle))) {
      partTime.value = !partTime.value
      // 切换选项数据重置
      resetOption(options[1])
      resetOption(options[2])
      resetOption(options[3])
    }
    ;['求职类型', '薪资待遇'].includes(itemTitle) ? (option.selectDropdown = false) : ''
  } else {
    option.selectDropdown = false
    resetOption(option)
  }
}
// 重置选项状态
function resetOption(option) {
  option.selectNum = 0
  option.dropdown.forEach((item) => {
    if (Object.prototype.hasOwnProperty.call(item, 'industryOptions')) {
      item.industryOptions.forEach((innerItem) => {
        item.active = false
      })
    } else {
      item.active = false
    }
  })
}

// 切换头部状态
function changeTopStatus() {
  topSelected.value = !topSelected.value
  if (topSelected.value) {
    setTimeout(() => {
      displayItem.value = true
    }, 200)
  } else {
    displayItem.value = false
  }
}

// 清空筛选条件
function clearCondition() {
  options.forEach((option) => resetOption(option))
}

// 列表组件数据传递
function changeInfoShow(jobId,bossId,selectId) {
  console.log(jobId,bossId,selectId);
  selectItem.value = selectId;
  updateJobData({jobId,bossId});
}



</script>
<!-- #6190E8-#A7BFE8 -->
<style>
#wrap {
  position: relative;
  min-width: 1224px;
  min-height: 100%;
  overflow: visible;
  overflow-x: hidden;
}

.page-job-recommend#wrap {
  height: 100%;
  overflow: hidden;
}

.page-job-recommend::before {
  content: ' ';
  position: absolute;
  inset: 0;
  height: 614px;
  opacity: 0.1;
  background: linear-gradient(180deg, #049afe, #0994f1, 50%, #fff);
  z-index: -1;
}

.job-recommend-main {
  position: relative;
  height: 92vh; /* 注意这里！！！ */
  overflow: auto;
}
/* 职位推荐最上边的选项栏 */
.job-recommend-main .job-recommend-search {
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 4;
  background: #fff;
}
.job-recommend-search .recommend-search-inner {
  margin: 0 auto;
  width: 1184px;
}
.job-recommend-search .recommend-search-expect {
  padding: 12px 0;
}
/* 右侧筛选按钮 */
.job-recommend-search .search-expand-btn.active,
.job-recommend-search .search-expand-btn:hover {
  color: var(--themeColor);
  background: rgba(0, 190, 189, 0.1);
}
.job-recommend-search .search-expand-btn {
  float: right;
  display: flex;
  align-items: center;
  border-radius: 4px;
  font-size: 16px;
  padding: 4px 12px;
  line-height: 22px;
  color: #333;
  transition: all 0.2s linear;
}
.job-recommend-search .search-expand-btn.active::before,
.job-recommend-search .search-expand-btn:hover::before {
  background-position: 0 -128px;
}
.job-recommend-search .search-expand-btn::before {
  content: ' ';
  width: 16px;
  height: 16px;
  background: url(https://img.bosszhipin.com/static/file/2023/9ek9jb0ir61692192374064.png) 0 -112px/20px
    auto no-repeat;
  margin-right: 8px;
}
/* 左侧一系列选项按钮 */
.job-recommend-search .recommend-job-btn {
  position: relative;
  max-width: 220px;
  white-space: nowrap;
  font-size: 16px;
  color: #666;
  line-height: 22px;
  padding: 4px 0;
  z-index: 1;
  float: left;
  transition: color 0.2s linear;
}
.job-recommend-search .recommend-job-btn.active {
  line-height: 30px;
  font-size: 20px;
  font-weight: 600;
  color: #222;
  padding: 0;
  cursor: default;
}

.job-recommend-search .recommend-job-btn.active::before {
  content: ' ';
  position: absolute;
  left: -4px;
  right: 0;
  bottom: -4px;
  z-index: -1;
  height: 10px;
  background: linear-gradient(90deg, #a0ecec, #fff2e6);
  border-radius: 5px;
}
.job-recommend-search .recommend-job-btn + .recommend-job-btn {
  margin-left: 32px;
}
.job-recommend-search .recommend-job-btn .text-content {
  display: block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.job-recommend-search .add-expect-btn {
  display: inline-flex;
  align-items: center;
  font-size: 16px;
  color: #666;
  line-height: 22px;
  padding: 4px 0;
  vertical-align: middle;
  position: relative;
  transition: all 0.2s linear;
  margin-left: 40px;
}
.job-recommend-search .add-expect-btn::before {
  content: ' ';
  width: 20px;
  height: 20px;
  display: inline-block;
  margin-right: 8px;
  background: url(https://img.bosszhipin.com/static/file/2023/9ek9jb0ir61692192374064.png) 0 0/20px
    auto no-repeat;
}
.job-recommend-search .add-expect-btn::after {
  content: ' ';
  position: absolute;
  z-index: 1;
  left: -20px;
  top: 50%;
  margin-top: -8px;
  width: 2px;
  height: 16px;
  background: #ededed;
  border-radius: 1px;
}
.clearfix:after {
  content: '';
  overflow: hidden;
  display: block;
  visibility: hidden;
  clear: both;
}
/* 下面一栏 */
.job-recommend-search .recommend-search-more {
  position: relative;
  padding: 12px 0;
  transition: all 0.2s linear;
}
.job-recommend-search .recommend-search-more::before {
  content: ' ';
  position: absolute;
  z-index: 1;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  background: #ededed;
}

.job-recommend-search .recommend-search-more .city-label {
  display: flex;
  align-items: center;
  background: rgba(0, 190, 189, 0.1);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  color: #00a6a7;
  line-height: 20px;
  padding: 6px 12px;
  cursor: pointer;
}
.job-recommend-search .recommend-search-more .city-label {
  float: left;
  margin-right: 8px;
}
.job-recommend-search .recommend-search-more .city-label .ui-icon-location,
.job-recommend-search .recommend-search-more .condition-filter-select,
.job-recommend-search .recommend-search-more .condition-industry-select {
  font-size: 16px;
  margin-right: 8px;
}
[class*=' ui-icon-'],
[class^='ui-icon-'] {
  font-family: ui-icons !important;
  speak: none;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.ui-icon-location:before {
  content: '\e652';
  font-family: 'iconfont';
}
.condition-filter-select {
  display: inline-block;
  position: relative;
  background: #f8f8f8;
  border-radius: 4px;
  overflow: hidden;
}

.condition-filter-select .current-select {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #222;
  line-height: 20px;
  padding: 6px 24px 6px 12px;
  cursor: pointer;
  transition: all 0.2s linear;
}
.condition-filter-select .current-select .placeholder-text {
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.condition-filter-select .current-select::after {
  content: ' ';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 4px;
  height: 7px;
  background: url(https://img.bosszhipin.com/static/file/2022/01vcskhm8y1652252017628.png) -6px -16px/10px
    auto no-repeat;
  transform: rotate(90deg);
  z-index: 1;
}
/* hover下滑内容！！ */
.condition-filter-select.open,
.condition-industry-select.open {
  background: #e5f8f8;
  overflow: visible;
  top: -11px;
}

.condition-filter-select.open .current-select,
.condition-industry-select.open .current-select {
  color: var(--themeColor);
}

.condition-filter-select.open .current-select:after,
.condition-industry-select.open .current-select:after {
  background-position: -6px -8px;
  transform: rotate(270deg);
}

.condition-filter-select.open::after,
.condition-industry-select.open::after {
  content: '';
  display: block;
  background-color: white;
  width: 100%;
  height: 10px;
}

.condition-filter-select.is-select .current-select {
  color: #00a6a7;
  background: #e5f8f8;
  font-weight: 500;
}

.condition-filter-select.is-select .current-select::after {
  background: url(https://img.bosszhipin.com/static/file/2022/01vcskhm8y1652252017628.png) -6px -8px/10px
    auto no-repeat;
}
.condition-industry-select.is-select .current-select {
  color: #00a6a7;
  background: #e5f8f8;
  font-weight: 500;
}

.condition-industry-select.is-select .current-select::after {
  background: url(https://img.bosszhipin.com/static/file/2022/01vcskhm8y1652252017628.png) -6px -8px/10px
    auto no-repeat;
}

.condition-filter-select .current-select .select-num {
  font-style: normal;
  display: inline-block;
  margin-left: 2px;
  vertical-align: bottom;
}
.condition-industry-select .current-select .select-num {
  font-style: normal;
  display: inline-block;
  margin-left: 2px;
  vertical-align: bottom;
}

.condition-filter-select .filter-select-dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  width: 168px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ededed;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.2s linear;
}

.condition-filter-select .filter-select-dropdown ul {
  padding: 4px 8px;
}
.condition-filter-select .filter-select-dropdown ul li {
  position: relative;
  display: block;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  line-height: 20px;
  padding: 8px 24px 8px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: all 0.2s linear;
}
.condition-filter-select .filter-select-dropdown ul li .ui-icon-check {
  display: none;
  position: absolute;
  font-weight: 700;
  font-size: 12px;
  top: 12px;
  right: 8px;
  z-index: 1;
  color: #00a6a7;
}
.condition-filter-select .filter-select-dropdown ul li:hover {
  color: var(--themeColor);
  font-weight: 500;
  background: #f8f8f8;
}
/* 选中li选项添加active */
.condition-filter-select .filter-select-dropdown ul li.active {
  color: #00a6a7;
  font-weight: 500;
}

.condition-filter-select .filter-select-dropdown ul li.active .ui-icon-check {
  display: inline-block;
}
.condition-filter-select .filter-select-dropdown ul li.active i.ui-icon-check::before {
  content: '\e6fa';
  font-family: 'iconfont'; /* 注意这个font-family */
}
.condition-industry-select {
  display: inline-block;
  position: relative;
  background: #f8f8f8;
  border-radius: 4px;
  overflow: hidden;
}

.condition-industry-select .current-select {
  position: relative;
  display: inline-block;
  font-size: 14px;
  font-weight: 400;
  color: #222;
  line-height: 20px;
  padding: 6px 24px 6px 12px;
  cursor: pointer;
  transition: all 0.2s linear;
}
.condition-industry-select .current-select .placeholder-text {
  display: inline-block;
  max-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.condition-industry-select .current-select::after {
  content: ' ';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 4px;
  height: 7px;
  background: url(https://img.bosszhipin.com/static/file/2022/01vcskhm8y1652252017628.png) -6px -16px/10px
    auto no-repeat;
  transform: rotate(90deg);
  z-index: 1;
}

.condition-industry-select .filter-select-dropdown {
  position: absolute;
  top: 40px;
  left: 0;
  z-index: 4;
  padding: 4px 0;
  background: #fff;
  overflow: auto;
  overflow: overlay;
  border-radius: 12px;
  border: 1px solid #ebeef5;
  opacity: 0;
  transition: opacity 0.2s linear;
}
.open .filter-select-dropdown {
  opacity: 1;
}
.job-recommend-search .recommend-search-more .condition-industry-select .filter-select-dropdown ul {
  width: 680px;
  height: 286px;
}
.condition-industry-select .filter-select-dropdown li {
  position: relative;
  padding-left: 182px;
}
.condition-industry-select .filter-select-dropdown ul li a:hover {
  color: #00a6a7;
  font-weight: 500;
  background: #f8f8f8;
}
.condition-industry-select .filter-select-dropdown li .select-list a.active {
  color: #00a6a7;
  font-weight: 500;
}

.condition-industry-select .filter-select-dropdown li .select-list a.active .ui-icon-check {
  display: block;
}
.condition-industry-select
  .filter-select-dropdown
  ul
  li
  .select-list
  a.active
  i.ui-icon-check::before {
  content: '\e6fa';
  font-family: 'iconfont';
}
.condition-industry-select .filter-select-dropdown li .label {
  position: absolute;
  top: 8px;
  left: 0;
  z-index: 1;
  width: 182px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: 500;
  color: #222;
  line-height: 20px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.condition-industry-select .filter-select-dropdown li .select-list {
  width: 100%;
  overflow: hidden;
}
.condition-industry-select .filter-select-dropdown li .select-list a {
  position: relative;
  width: 25%;
  float: left;
  padding: 8px 24px 8px 8px;
  font-size: 14px;
  font-weight: 400;
  color: #333;
  line-height: 20px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: all 0.2s linear;
}
.condition-industry-select .filter-select-dropdown li .select-list a .ui-icon-check {
  display: none;
  position: absolute;
  font-weight: 700;
  font-size: 12px;
  top: 12px;
  right: 8px;
  z-index: 1;
  color: #00a6a7;
}
.job-recommend-search
  .recommend-search-more
  .condition-industry-select
  .filter-select-dropdown
  ul
  li
  .select-list
  a {
  width: 33.33%;
}
.job-recommend-search .recommend-search-more .clear-search-btn {
  float: right;
  font-size: 14px;
  font-weight: 400;
  color: #999;
  line-height: 20px;
  margin-top: 6px;
  transition: all 0.2s linear;
}

.job-recommend-search .recommend-search-more .clear-search-btn:hover {
  color: #00a6a7;
}
/* 下面的内容区 */
.job-recommend-main .job-recommend-result {
  margin-top: 12px;
}

.job-recommend-main .recommend-result-inner {
  margin: 0 auto;
  width: 1184px;
  transition: all 0.2s linear;
}
/* 右侧内容区 */
.rec-job-list .job-item {
  position: relative;
  border-radius: 12px;
  cursor: pointer;
  background-color: #fff;
  transition: box-shadow 0.2s linear;
}

.job-item+.job-item{
  margin-top: 12px;
}

.job-item.active,
.job-item:hover {
  z-index: 2;
  box-shadow: 0 20px 16px 0 hsla(0, 0%, 70.2%, 0.2);
}

.job-item.active{
  z-index: 1;
  border: 1px solid #02ddff;
}


.job-recommend-main .job-list-container {
  float: left;
  width: 384px;
}
.job-recommend-main .job-list-container .loading-wait {
  margin: 12px auto;
  display: block;
  margin: 0 auto;
  width: 36px;
  height: 36px;
  text-align: center;
  overflow: hidden;
}
.loading-wait > div:first-child {
  margin-left: 0;
}
.loading-wait > div:last-child {
  margin-right: 0;
}
.loading-wait .rect4 {
  -webkit-animation-delay: -0.7s;
  animation-delay: -0.7s;
}
.loading-wait .rect3 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
.loading-wait .rect2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
.loading-wait > div {
  background: #00bebd;
  height: 100%;
  width: 6px;
  margin: 0 2px;
  float: left;
  -webkit-animation: sk-stretchdelay-data-v-38ea4e9c 1s ease-in-out infinite;
  animation: sk-stretchdelay-data-v-38ea4e9c 1s ease-in-out infinite;
}
/* 左侧内容区 */
.job-recommend-main .job-detail-container {
  position: sticky;
  right: 0;
  top: 66px;
  float: right;
  width: 784px;
  height: calc(100vh - 134px);
  overflow-y: hidden;
  margin-top: -10px; /* ok */
}
.job-recommend-main .job-recommend-search.is-expand + .job-recommend-result .job-detail-container {
  top: 122px;
  height: calc(100vh - 190px);
}
.job-detail-box {
  background: #fff;
  border-radius: 16px;
  padding-bottom: 6px;
  overflow: hidden;
  height: 100%;
  margin-top: 10px; /* ok */
}
.job-detail-box .job-detail-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 30px;
  border-radius: 16px 16px 0 0;
  transition: box-shadow 0.2s linear;
}
.job-detail-box .job-detail-header.has-shadow {
  position: relative;
  z-index: 1;
  box-shadow: 0 6px 20px 0 hsla(0, 0%, 60%, 0.2);
}
.job-detail-box .job-header-info {
  flex: 1;
  max-width: 550px;
}
.job-detail-box .job-detail-info {
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.job-detail-box .job-detail-info .job-name {
  font-size: 20px;
  font-weight: 600;
  color: #222;
  line-height: 28px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.job-detail-box .job-detail-info .job-salary {
  font-size: 24px;
  font-family: kanzhun-mix, kanzhun-Regular;
  color: #fe574a;
  line-height: 29px;
  flex-shrink: 0;
  margin-left: 20px;
}
.job-detail-box .tag-list {
  overflow: hidden;
  height: 20px;
  margin-top: 12px;
  display: flex;
}
.job-detail-box .tag-list li {
  position: relative;
  color: #222;
  line-height: 20px;
  font-size: 14px;
  display: flex;
  align-items: center;
}
.job-detail-box .tag-list li:before {
  content: ' ';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url(https://img.bosszhipin.com/static/file/2023/gajcfc5soe1683184253263.png) 0 0/16px
    auto no-repeat;
}
.job-detail-box .tag-list li a {
  color: #222;
}
.job-detail-box .tag-list li + li {
  margin-left: 20px;
}
.job-detail-box .tag-list li:nth-child(2):before {
  background-position: 0 -16px; /* 这里是放了一个雪碧图！！！ */
}
.job-detail-box .tag-list li:nth-child(3):before {
  background-position: 0 -32px;
}
.job-detail-box .job-detail-op {
  flex-shrink: 0;
}
.job-detail-box .op-btn.op-btn-like {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px 0;
}
.job-detail-box .op-btn.op-btn-like::before {
  content: ' ';
  display: inline-block;
  width: 18px;
  height: 18px;
  background: url(https://img.bosszhipin.com/static/file/2022/522c2lv9sq1661499296747.png) 0 0/18px
    auto no-repeat;
  margin-right: 4px;
}
.job-detail-box .op-btn.op-btn-chat {
  background: var(--themeColor);
  color: #fff;
}
.job-detail-box .op-btn + .op-btn {
  margin-left: 12px;
}
.job-detail-box .op-btn {
  float: left;
  width: 104px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  border-radius: 8px;
  line-height: 20px;
  padding: 7px 20px;
  color: var(--themeColor);
  border: 1px solid var(--themeColor);
  transition: all 0.2s linear;
}
/* 职位的详情表 */
.job-detail-box .job-detail-body {
  max-height: calc(100vh - 228px);
  padding: 16px 30px 14px;
  overflow: auto;
  overflow: overlay;
  max-height: calc(100vh - 289px);
}
.job-detail-box .job-detail-body .title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  line-height: 22px;
}
.job-detail-box .job-detail-body .link-report {
  float: right;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #999;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s linear;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.job-detail-box .job-detail-body .link-report::before {
  content: ' ';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url(https://img.bosszhipin.com/static/file/2022/a1rf1ikjew1661779185140.png) 0 -32px no-repeat;
  background-size: 16px auto;
}
.job-detail-box .job-detail-body .link-wechat-share {
  margin-right: 25px;
  float: right;
  height: 20px;
  font-size: 14px;
  font-weight: 400;
  color: #999;
  line-height: 20px;
  cursor: pointer;
  transition: all 0.2s linear;
  position: relative;
  display: inline-flex;
  align-items: center;
}
.job-detail-box .job-detail-body .link-wechat-share:before {
  content: ' ';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url(https://img.bosszhipin.com/static/file/2022/a1rf1ikjew1661779185140.png) 0 0
    no-repeat;
  background-size: 16px auto;
}
.job-detail-box .job-detail-body .job-label-list {
  overflow: hidden;
  margin-top: 12px;
  margin-bottom: -4px;
  margin-left: -4px;
}
.job-detail-box .job-detail-body .job-label-list li {
  background: #f8f8f8;
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 13px;
  color: #666;
  line-height: 20px;
  float: left;
  margin: 4px;
}
/* 职位的描述！！可以看看别人是怎么写的！！！ */
/* 还是这里可以想想是怎么写的 */
.job-detail-box .job-detail-body .desc {
  margin-top: 16px;
  font-size: 14px;
  color: #222;
  line-height: 24px;
  text-align: justify;
  white-space: pre-wrap;
  word-break: break-all;
}
/* BOSS信息 */
.job-detail-box .job-detail-body .job-boss-info {
  border-top: 1px solid #ededed;
  padding-top: 16px;
  margin-top: 24px;
}
.job-detail-box .job-detail-body .job-boss-info .detail-figure {
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 12px;
  border: 1px solid #f6fdfd;
  border-radius: 100%;
}
.job-detail-box .job-detail-body .job-boss-info .detail-figure img {
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 100%;
}
.job-detail-box .job-detail-body .job-boss-info .name {
  font-size: 16px;
  font-weight: 500;
  color: #222;
  line-height: 22px;
  display: flex;
  align-items: center;
}
.job-detail-box .job-detail-body .job-boss-info .icon-vip {
  width: 16px;
  height: 16px;
  margin-left: 8px;
  margin-top: 0;
  background: url(https://img.bosszhipin.com/static/file/2022/dcxvc4yjp41661777557709.png) 0 0/16px
    auto no-repeat;
}
.job-detail-box .job-detail-body .job-boss-info .boss-active-time {
  font-size: 12px;
  color: #999;
  line-height: 20px;
  margin-left: 16px;
  font-weight: 400;
}
.job-detail-box .job-detail-body .job-boss-info .boss-info-attr {
  font-size: 12px;
  color: #666;
  line-height: 17px;
  margin-top: 4px;
  display: flex;
  align-items: center;
}
/* 工作地址 */
.job-detail-box .job-detail-body .job-address {
  border-top: 1px solid #ededed;
  padding-top: 16px;
  margin-top: 24px;
}
.job-detail-box .job-detail-body .job-address .job-address-title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  line-height: 22px;
}
.job-detail-box .job-detail-body .job-address .job-address-desc {
  margin-top: 12px;
  font-size: 14px;
  color: #333;
  line-height: 20px;
  display: flex;
  align-items: center;
  word-break: break-all;
}
.job-detail-box .job-detail-body .job-address .job-address-desc:before {
  content: ' ';
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  background: url(https://img.bosszhipin.com/static/file/2023/gajcfc5soe1683184253263.png) 0 0/16px
    auto no-repeat;
}
.job-detail-box .job-detail-body .job-address .map-box-wrapper {
  margin-top: 12px;
}
.map-box-wrapper {
  position: relative;
  min-height: 64px;
  background: #ccc;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
}
.map-box-wrapper img {
  width: 100%;
  display: block;
}
.map-box-wrapper .address-map-btn {
  cursor: pointer;
  position: absolute;
  right: 12px;
  bottom: 14px;
  font-size: 14px;
  color: #333;
  line-height: 20px;
  padding: 8px 10px 8px 40px;
  background:
    url(https://img.bosszhipin.com/static/file/2022/oqp2zomui31661947170536.png) 12px 7px/21px 21px
      no-repeat,
    #fff;
  box-shadow: 0 3px 40px 0 hsla(0, 0%, 60%, 0.3);
  border-radius: 12px;
  transition: all 0.2s linear;
}
.job-detail-box .more-job-btn {
  margin: 24px auto 0;
  display: block;
  width: 184px;
  padding: 9px 0;
  text-align: center;
  border-radius: 6px;
  border: 1px solid var(--themeColor);
  font-size: 14px;
  color: var(--themeColor);
  line-height: 20px;
  transition: all 0.2s linear;
  margin-bottom: 60px; /* 这里 */
}
/* 下拉框过渡效果 */
</style>


